<template>
    <div class="default-main">
        <div class="ba-table-box">


            <!-- 表格顶部菜单 -->
            <TableHeader
                :buttons="['refresh', 'comSearch', 'quickSearch', 'columnDisplay']"
                :quick-search-placeholder="t('Quick search placeholder', { fields: '标题' })"
            >
                <template #default>

                    <el-button icon="el-icon-Connection" @click="restartTask" :disabled="multipleSelection.length == 0"  class="ml-4" type="danger" >
                        <span class="ml-1">重启任务</span>
                    </el-button>
                </template>
            </TableHeader>

            <!-- 表格 -->
            <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
            <Table ref="tableRef"   @selection-change="handleSelectionChange"/>

            <!-- 编辑和新增表单 -->
            <Details />
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, provide, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import Details from './components/detailsDialog.vue'; // 相对于 index.vue 的路径
import { baTableApi } from '/@/api/common'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
import {push} from "/@/api/backend/routine/queueTask";

defineOptions({
    name: 'routine/queueTasks',
})

const { t } = useI18n()
const tableRef = ref()

const restartTask = async () => {
    try {
        await push(baTable.getSelectionIds().join(','))
        baTable.getIndex()
    } catch (error) {
        console.error('获取详情失败:', error)
    } finally {
        baTable.form.loading = false
    }
}
/**
 * 多选触发
 * @param val
 */
const multipleSelection = ref([])
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}
let optBtn = [
    {
        // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
        render: 'tipButton',
        name: 'info',
        title: '详情',
        type: 'primary',
        icon: 'fa fa-search-plus',
        class: 'table-row-info',
        // tipButton 禁用 tip
        disabledTip: false,
        // 自定义点击事件
        click: (row: TableRow, field: TableColumn) => {
            baTable.form.operate = 'Details'
            baTable.form.operateIds = row.id
        },
        // 自定义el-button属性
        attr: {}
    }
]
const baTable = new baTableClass(new baTableApi('/admin/routine.queueTasks/'), {
    column: [
        { type: 'selection', align: 'center', operator: false },
        { label: t('Id'), prop: 'id', align: 'center', operator: '=', show: false, operatorPlaceholder: t('Id'), width: 70 },
        { label: '站点名称', prop: 'site.name', align: 'center', operator: 'LIKE', width: 130,operatorPlaceholder: t('Fuzzy query') },
        {
            label: '任务标题',
            prop: 'title',
            align: 'center',
            operator: 'LIKE',
            width: 480,
            operatorPlaceholder: t('Fuzzy query'),
        },
        {
            label: '开始时间',
            prop: 'start_time',
            align: 'center',
            render: 'datetime',
            operator: 'RANGE',
            width: 160,
            sortable: 'custom',
        },
        {
            label: '结束时间',
            prop: 'end_time',
            align: 'center',
            render: 'datetime',
            operator: 'RANGE',
            width: 160,
            sortable: 'custom',
        },
        {
            label: '状态',
            prop: 'status',
            align: 'center',
            render: 'tag',
            custom: { '0': 'info', '1': 'warning', '2': 'success', '3': 'danger', '4': 'info' },
            replaceValue: { '0': '等待', '1': '运行中', '2': '已完成', '3': '失败', '4': '执行超时' },
        },
        {
            label: t('Operate'),
            align: 'center',
            width: '100',
            render: 'buttons',
            buttons: optBtn,
            operator: false,
        },
    ],
    defaultOrder: { prop: 'id', order: 'desc' },
})
provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
    })
})
</script>
